import React, { Component } from 'react'
import {createStore} from 'redux';
import {Provider,connect} from 'react-redux';
import register from '../action/register';
import mapStateToProps from '../value/mapStateToProps'//连接仓库

class Register extends Component {

  constructor (props) {
    super(props)
    this.state={
        name: '123',
        password: '111',
        phonenum: '111'
   }   
  }

  callbackTo=()=>{
    if(confirm('注册成功，现在登录吗')){
      this.props.history.push('/login') ; //路由跳转，回到登录
       
     }else{
      this.props.history.push('/') ; //路由跳转，回到首页        
     }
     
  }
  handlerSubmit=(e)=>{
    e.preventDefault();
    this.setState({
      name:this.refs.regname.value,
      password:this.refs.regpwd.value,
      phonenum:this.refs.regphone.value
    },()=>{ 
      fetch("http://10.31.160.25:3000/users/data", {
           method: "POST",
           headers: {
             'Content-Type': 'application/x-www-form-urlencoded'
           },
           body: 'name=' + this.state.name + '&password=' + this.state.password + '&phonenum=' + this.state.phonenum
         }).then((res)=> {
            return res.json();
  
         }).then((data)=>{
          
           if(data == true){
            alert('用户名已存在');
            $('#myform').find('input').val();
            
            $('#myform')[0].reset(); //form表单清空            
           }else{

            console.log("form  111")
            // $('#myform')[0].reset(); //form表单清空
            if(confirm('注册成功，现在登录吗')){
              this.props.history.push('/login') ; //路由跳转，去登陆                         
             }else{
              this.props.history.push('/') ; //路由跳转，回到首页        
             }
           }
         });
    })
  }

  handlerCancel=(e)=>{
    this.props.history.push('/') ; //路由跳转，回到首页
  }

  render() { 
  var style={
    mainForm:{
      width:"500px",
      border:"1px solid #ccc",  
      backgroundColor:"#fff",  
      margin:"30px auto"
    },
    h3:{
      width:"500px",
      height:"50px",
      lineHeight:"50px",      
      backgroundColor:"#222",
      marginTop:"0px",
      paddingLeft:"20px",
      color:'white'
    },
  form :{
      padding:"30px 20px"
    }
  }
 
    return (
      
      <div className="container" style={{width:"100%",height:"628px",backgroundImage:"url(./img/222.png)",backgroundSize:"100% 100%",backgroundRepeat:"no-repeat"}}>
       <div className ="main-form" style={style.mainForm}>
        <h3 style={style.h3}>用户注册</h3>
        <form style={style.form} onSubmit={this.handlerSubmit.bind(this) } id="myform">
          <div className="form-group">
          <label htmlFor="exampleInputName2">用户名</label>
          <input type="text"  ref="regname" onBlur={this.repeatName} className="form-control" id="exampleInputName2" placeholder="Jane Doe" />
          </div>
          <div className="form-group">
            <label htmlFor="exampleInputPassword1">密码</label>
            <input type="password" ref="regpwd" className="form-control" id="exampleInputPassword1" placeholder="Password" />
          </div>
          <div className="form-group">
            <label htmlFor="exampleInputPhonenum1">手机号</label>
            <input type="text"  ref="regphone" className="form-control" id="exampleInputPhonenum1" placeholder="Phonenum"/>
          </div>
          <div className="form-group" style={{margin:"30px 0 0 150px"}} >
              <button type="submit" className="btn btn-default" style={{marginRight:"30px"}} >注册</button>
              <button type="button" className="btn btn-default" onClick={this.handlerCancel.bind(this)}>取消</button>
          </div>
        </form>
        </div>
      </div>
    )
  }
}

export default connect(mapStateToProps,{register})(Register)
